<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-crud ref="crud" :data="questionListData" :option="optionQuestion" @expand-change="expandChanges"
                    :page="page" @refresh-change="refresh" @size-change="sizeChange" @current-change="currentChange"
                    @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange">
                    <template slot="expand" slot-scope="{row}">
                        <avue-article :option="questionDetailOption" :data="questionDetailData"></avue-article>
                    </template>
                    <template slot-scope="scope" slot="menu">
                        <el-button :size="scope.size" :type="scope.type"
                            @click="handleRemove(scope.row)">删除</el-button>
                    </template>
                    <template slot-scope="scope" slot="menuLeft">
                        <el-button type="danger" size="small" plain @click="handlebatchRemove()">批量删除</el-button>
                    </template>
                </avue-crud>
            </el-card>
        </el-row>
    </el-main>
</template>

<script>
    export default {
        data() {
            return {
                replaceContent: '',
                // replaceTitle: '',
                dirtyWords: [],
                selectionData: [],
                questionDetailOption: {
                    props: {
                        title: 'title',
                        meta: 'meta',
                        body: 'body'
                    },
                },
                searchForm: {
                    keyword: '',
                },
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                questionDetailData: [],
                questionListData: [],
                optionQuestion: {
                    selection: true,
                    expand: true,
                    expandRowKeys: [],
                    idKey: 'id',
                    align: 'center',
                    menuAlign: 'center',
                    size: 'small',
                    dialogWidth: '35%',
                    dialogTop: 200,
                    page: true,
                    addBtn: false,
                    delBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    searchShow: true,
                    filterBtn: false,
                    columnBtn: false,
                    searchMenuSpan: 5,
                    column: [{
                        label: '标题',
                        prop: 'title',
                        span: 24,
                    }, {
                        label: '分类',
                        prop: 'catesShow',
                        span: 24,
                    }, {
                        label: '所属话题',
                        prop: 'topic',
                        span: 24,
                    }, {
                        label: '发布人',
                        prop: 'publishname',
                        span: 24,
                    }, {
                        label: '发布时间',
                        prop: 'created_at',
                        span: 24,
                    }, {
                        label: '关键字',
                        prop: 'keyword',
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                        span: 24,
                        width: 180,
                        hide: true,
                        searchPlaceholder: '标题|内容'
                    }]
                },
            }
        },
        created() {
            this.getListQuestion()
        },
        mounted() {
            const _this = this
            _this.axios.post(_this.$API.ZHIHUAPI.getDirtyWords).then((res) => {
                // res = res.data
                this.dirtyWords = res.data
            }).catch(() => {
                this.dirtyWords = []
            })
        },
        methods: {
            searchChange(params, done) {
                done();
                this.searchForm.keyword = params.keyword || ''
                this.getListQuestion()
            },
            searchReset() {
                this.searchForm = {}
                this.getListQuestion()
            },
            // 分页
            sizeChange(val) {
                this.page.currentPage = 1
                this.page.pageSize = val
                this.getListQuestion()
            },
            // 当前页
            currentChange(val) {
                this.page.currentPage = val
                this.getListQuestion()
            },
            // 刷新
            refresh() {
                this.getListQuestion()
            },
            getListQuestion() {

                const _this = this
                const params = {
                    keyword: _this.searchForm.keyword,
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                }
                // _this.selectionData = []
                _this.axios.post(_this.$API.ZHIHUAPI.listDirtyQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.questionListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.questionListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.questionListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.questionListData = []
                    _this.page.total = 0
                })
            },
            expandChanges(row, expendList) {
                if (expendList.length) {
                    this.optionQuestion.expandRowKeys = []
                    this.questionDetailData = []
                    this.replaceContent = ''
                    // this.replaceTitle = ''
                    if (row) {
                        this.optionQuestion.expandRowKeys.push(row.id)

                        if (this.dirtyWords.length > 0) {
                            this.replaceContent = row.content;
                            // this.replaceTitle = row.title;
                            for (let i = 0; i < this.dirtyWords.length; i++) {
                                var reg = new RegExp("(" + this.dirtyWords[i] + ")", "g");
                                this.replaceContent = this.replaceContent.replace(reg, "<font color=#FF6633>$1</font>");
                                // this.replaceTitle = this.replaceTitle.replace(reg, "<font color=#FF6633>$1</font>");
                            }

                            this.questionDetailData = {
                                title: row.title,
                                meta: row.publishname + " / " + row.created_at,
                                body: this.replaceContent
                            }
                        }
                    }
                } else {
                    this.optionQuestion.expandRowKeys = []
                    this.questionDetailData = []
                    this.replaceContent = ''
                    // this.replaceTitle = ''
                }
            },
            selectionChange(list) {
                this.selectionData = list
                // this.$message.success('选中的数据'+ JSON.stringify(list));
            },
            handlebatchRemove()
            {
                const _this = this
                if (_this.selectionData.length === 0) {
                    _this.$message({
                        showClose: false,
                        message: "请选择需要删除的数据",
                        type: 'warning'
                    })
                    return
                }
                var id = []
                for (let i = 0; i < _this.selectionData.length; i++) {
                    id.push(_this.selectionData[i].id)
                }
                // console.log(id)

                _this.$confirm('是否确认删除选择的#' + _this.selectionData.length + "条记录", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    const params = {
                        id: id
                    }
                    _this.axios.post(_this.$API.ZHIHUAPI.removeDirtyQuestion, _this.qs.stringify(params)).then((res) => {
                        res = res.data
                        if (res.code === 10000) {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'success'
                            })
                            _this.getListQuestion()
                        } else {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'error'
                            })
                        }
                    }).catch(() => {
                        _this.$message({
                            showClose: false,
                            message: '网络连接失败，请重试！',
                            type: 'error'
                        })
                    })
                }).catch(() => {})
            },
            handleRemove(row) {
                const _this = this
                _this.$confirm('是否确认删除#' + row.title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    const params = {
                        id: row.id,
                    }
                    _this.axios.post(_this.$API.ZHIHUAPI.removeDirtyQuestion, _this.qs.stringify(params)).then((res) => {
                        res = res.data
                        if (res.code === 10000) {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'success'
                            })
                            _this.getListQuestion()
                        } else {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'error'
                            })
                        }
                    }).catch(() => {
                        _this.$message({
                            showClose: false,
                            message: '网络连接失败，请重试！',
                            type: 'error'
                        })
                    })
                }).catch(() => {})
            }
        }
    }
</script>

<style>
</style>
